<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="rgb(107,60,94)" status-bar left-icon="left"
			left-text="返回" title="数据统计" @clickLeft="back()" />
		<view class="example-body">

			<uni-title type="h1" title="本月预约数量"></uni-title>
			<view class="charts-box">
				<qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataColumn1" />
			</view>
			<uni-title type="h1" title="本月预约学生系别"></uni-title>
			<!-- <swiper style="height: 330px;" :indicator-dots="true">
				<swiper-item> -->
			<view class="charts-box">
				<qiun-data-charts type="pie" :chartData="chartsDataPie1" />
			</view>
			<!-- </swiper-item>
				<swiper-item>
					<view class="charts-box">
						<qiun-data-charts type="column"
							:opts="{color:['#94456d','#6b3c5e'],extra:{column:{linearType:'custom',seriesGap:0,linearOpacity:0.5,barBorderCircle:true,customColor:['#FA7D8D','#EB88E2']}}}"
							:chartData="columnDatas" />
					</view>
				</swiper-item> -->

			<!-- </swiper> -->
			<uni-title type="h1" title="本月预约学生年级"></uni-title>
			<view class="charts-box">
				<qiun-data-charts type="pie" :chartData="chartsDataPie2" />
			</view>
			<uni-title type="h1" title="预约数量变化"></uni-title>
			<view class="charts-box">
				<!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
				<qiun-data-charts type="area"
					:opts="{yAxis:{data:[{min:0}]},extra:{area:{type:'curve',addLine:true,gradient:true}}}"
					:chartData="chartsDataLine3" :echartsH5="true" :echartsApp="true" />
			</view>
			<uni-title type="h1" title="分类预约数量变化"></uni-title>
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true" />
			</view>

		</view>

	</view>

</template>


<script>
	//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
	import demodata from '../../uni_modules/qiun-data-charts/mockdata/demodata.json';
	import mapdata from '../../uni_modules/qiun-data-charts/mockdata/mapdata.json'
	export default {
		data() {
			return {
				columnDatas: {},
				chartsDataPie1: {},
				chartsDataPie2: {},
				chartsDataColumn1: {},
				chartsDataLine3: {},
				chartsDataLine1: {}
			};
		},
		onReady() {
			//模拟从服务器获取数据
			this.getServerData()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 0
				})
			},
			getServerData() {
				setTimeout(() => {
					//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
					//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
					this.columnDatas = {
						"categories": ["会议室", "机房", "共享空间"],
						"series": [{
							"name": "预约数量",
							"data": [35, 36, 31, 33, 13, 34]
						}]
					}
					this.chartsDataPie1 = JSON.parse(JSON.stringify({
						"series": [{
							"data": [{
								"name": "计算机科学与技术",
								"value": 50
							}, {
								"name": "人工智能",
								"value": 30
							}, {
								"name": "网络空间安全",
								"value": 20
							}, {
								"name": "通信",
								"value": 18
							}]
						}]
					}))
					this.chartsDataPie2 = JSON.parse(JSON.stringify({
						"series": [{
							"data": [{
								"name": "2019级",
								"value": 20
							}, {
								"name": "2020级",
								"value": 30
							}, {
								"name": "2021级",
								"value": 20
							}, {
								"name": "2022级",
								"value": 18
							}]
						}]
					}))

					this.chartsDataColumn1 = this.columnDatas
					this.chartsDataLine1 = JSON.parse(JSON.stringify({
						"categories": ["10月", "11月", "12月", "1月", "2月"],
						"series": [{
							"name": "会议室",
							"data": [40, 25, 50, 4, 20]
						}, {
							"name": "共享空间",
							"data": [40, 65, 100, 44, 68]
						}, {
							"name": "自习室",
							"data": [80, 95, 150, 112, 132]
						}]
					}))
				}, 1500);
				//渐变色区域图
				let linearareadata = {
					categories: ["10月", "11月", "12月", "1月", "2月"],
					series: [{
						name: "数量",
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#1890FF' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						data: [80, 95, 150, 112, 132]
					}]
				}
				this.chartsDataLine3 = linearareadata
			}
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.seatchoose {
		font-size: 16px;
		display: flex;
		margin-top: 10px;
		border: rgb(220, 223, 230) 1px solid;
		border-radius: 20rpx;
		padding: 5px;
	}

	.seatleft {
		padding-right: 10px;
		align-content: center;
		margin-right: 40rpx;
	}

	.seatright {
		align-self: center;
		justify-content: center;
		align-content: center;
		left: 20%;
		width: 400rpx;
		/* margin-left: 10%; */
	}

	.container {
		font-size: 14px;
		line-height: 24px;
		padding: 0 2 2 2px;
	}

	.choose {
		color: #FFFFFF;
		background-color: rgb(107, 60, 94);

	}

	.btn {
		background-color: rgb(107, 60, 94);
		color: white;
		margin-top: 50rpx;
	}

	/* unirow用到的style */
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	/*教学楼按钮*/
	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;

	}

	.uni-pb-5 {
		padding-bottom: 5px;
		flex: auto;
	}

	.title {
		padding: 5px;
	}


	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
<style lang="scss">
	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}
</style>
